<template>
  <view class="center">
    <!-- 背景图 -->
    <view class="header-image"><image mode="aspectFill" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/order/Order_map_1.png"></image></view>
    <!-- 选项卡 -->
    <view class="position-tab-list">
      <view class="hrader">
       <ms-tabs class="tabs-mzy" :list="tabList" v-model="tebActive" itemColor='#262626' lineColor='#FF800C'
       	@input="handleChange" />
      </view>
      <view class="main">
        <view 
          class="order-list" 
          v-for="(item,index) in orderData" 
          :key="item.id" 
          @click="orderDeail" 
          :style="{ background: item.status == 1 ? ' #FFF1F1' : '#FFFAF5'}"
        >
          <view class="header-title">
            <view class="item-img-title">
              <view class="img-goods">
                <image style="border-radius:20rpx" :src="item.orderItems[0].skuCoverImageUrl"></image>
              </view>
              <view class="goods-title-box">
                <view class="goods-title">{{item.orderItems[0].spuName + item.orderItems[0].skuName}}</view>
                <view class="price" :style="{ color: item.state == -1 ? '#FF5449' : '#FF800C'}">￥{{item.orderItems[0].skuPrice}}</view>
              </view>
            </view>
            <view class="status-price">
              <view class="status" :style="{ color: item.state == -1 ? '#FF5449' : '#FF800C'}">{{ item.statusName }}</view>
              <view class="paly-btn" v-if="item.state > 0 || item.state < 9">去支付</view>
            </view>
          </view>
          <view class="btn-time" v-if="item.state > 0 || item.state < 9"> {{rocallTime}}后订单失效</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { orderList } from '@/utils/api.js' // 接口api
  import {saleStatu,filterStatus} from '@/utils/state.js'
  export default{
    data() {
      return{
        timeForm: {
          formatCreateTime: '2021/11/16 11:30:00',
          currentTime: '2021/11/16 11:30:00'
        },
        orderTitle: '', // 当前tab标题
        fromData:{
          pageNum: 1, // 总页数
          pageSize: 10,
          orderStatus: '',
        },
        rocallTime:'',
        orderData: [], // 订单数据
        tebActive: 0,
        tabList:[
          { id: 1, title: '全部'}, { id: 2, title: '已取消'}, 
          { id: 3, title: '待支付'}, { id: 4, title: '已完成'}
        ]
      }
    },
    onLoad() {
      this.ComputetTime(this.timeForm)
      this.getOrderList() // 获取订单列表接口
      this.$wechat.unseBehavior()
    },
    methods:{
      // 获取订单列表
      async getOrderList() {
        const vm = this
        const orderRes = await orderList()
        const arr = orderRes.items
        arr.forEach(item => { //匹配状态
          const status = item.state
          if (vm.fromData.orderStatus) {
            item.statusName = vm.orderTitle
          } else {
            item.statusName = filterStatus(status, saleStatu)
          }
        })
        this.orderData = arr
      },
      // 详情
      orderDeail() {
        uni.navigateTo({
          url: '/pages/my/order/detail'
        })
      },
      // 选项卡事件
      handleChange(index, tab) {
        const vm = this
        vm.fromData.pageNum = 1 // 初始化页码
        const { title, value } = tab
        vm.fromData.orderStatus = value
        vm.orderTitle = title
      },
      //支付倒计时
     ComputetTime(data) {
         let st = data.currentTime.replace(/\-/g, "/"),//当前服务器时间
           ct = data.formatCreateTime.replace(/\-/g, "/");//创建订单时间
         let ts = new Date(st).getTime(),
           tc = new Date(ct).getTime();
         let cm = 15 * 60 * 1000 - (ts - tc);
         console.log("cm",new Date(cm).getSeconds())
         this.runBack(cm);
     },
    runBack(cm) {
       if (cm > 0) {
         cm > 60000
           ? (this.rocallTime =
           (new Date(cm).getMinutes() < 10
             ? "0" + new Date(cm).getMinutes()
             : new Date(cm).getMinutes()) +
           ":" +
           (new Date(cm).getSeconds() < 10
             ? "0" + new Date(cm).getSeconds()
             : new Date(cm).getSeconds()))
           : (this.rocallTime =
           "00:" +
           (new Date(cm).getSeconds() < 10
             ? "0" + new Date(cm).getSeconds()
             : new Date(cm).getSeconds()));
         let _msThis = this;
         setTimeout(function() {
           cm -= 1000;
           _msThis.runBack(cm);
         }, 1000);
         console.log("倒计时:",this.rocallTime)
       } else {
         
       }
     },
    }
  }
</script>

<style lang="scss" scoped>
  .center{
    .header-image{
      width: 100%;
      height: 400rpx;
    
    }
    .position-tab-list{
      width: 100%;
      position: absolute;
      left: 0;
      top: 356rpx;
      .hrader{
        width: 100%;
        height: 120rpx;
        display: flex;
        align-items: center;
        // padding: 20rpx 0;
        background: #FFFFFF;
        border-bottom:  2rpx solid #EEEEEE;
        border-radius: 30rpx 30rpx 0 0;
         /deep/.tabBlock{
           margin: auto;
         }
        /deep/.tabBlock .tab__item-title {
        	margin: 0 36rpx;
        }
        /deep/ .tabBlock .tab__item{
          font-size: 28rpx;
          color: #8C8C8C;
        }
        /deep/ .tabBlock .tab__item--active{
          font-size: 28rpx;
          font-weight: bold;
          color: #262626 !important;
        }
        /deep/ .tab__line{
          width: 35rpx !important;
          height: 8rpx;
          border-radius: 4rpx;
        }
      }
      .main{
        font-size: 28rpx;
        padding: 32rpx 40rpx;
        .order-list{
          width: 100%;
          height: auto;
          border-radius: 32rpx;
          padding: 16rpx;
          margin-bottom: 16rpx;
          .header-title{
            display: flex;
            justify-content: space-between;
           .item-img-title{
             display: flex;
             align-items: center;
             .img-goods{
               width: 128rpx;
               height: 128rpx;
             }
             .goods-title-box{
               margin-left: 16rpx;
               text-align: left;
               .goods-title{
                 margin-top:30rpx;
                 font-size: 28rpx;
                 color: #262626;
               }
                .price{
                  margin-top: 20rpx;
                  font-size: 24rpx;
                  font-weight: bold;
                }
             }
           }
           .status-price{
             text-align: right;
             .status{
               font-size: 24rpx;
             }
             .paly-btn{
               width: 144rpx;
               height: 48rpx;
               background: #FF800C;
               border-radius: 24rpx;
               color: #FFFFFF;
               text-align: center;
               line-height: 48rpx;
               font-size: 24rpx;
               margin-top: 38rpx;
             }
           }
          }
          .btn-time{
            margin-top: 10rpx;
            text-align: right;
            font-size: 20rpx;
            color: #FF800C;
          }
        }
      }
    }
  }
</style>
